<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column label="序号" width="70" type="index"></el-table-column>
    <el-table-column label="图片" width="100">
      <template #default="scope">
        <img width="100" :src="scope.row.img" />
      </template>
    </el-table-column>
    <el-table-column prop="bannerid" label="BannerId" width="200" />
    <el-table-column prop="alt" label="Alt"  />
    <el-table-column prop="link" label="绑定连接"  />
    <el-table-column label="是否展示" width="100">
      <template #default="scope"><el-switch :modelValue="scope.row.flag" @change="handleChangeFlag(scope.row)" /></template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button v-authority:disabled.superadmin link type="primary" size="small" @click="handleDeleteBanner(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { updateBannerFlagApi, deleteBannerItemApi } from '@/api/banner'
export default {
  name: 'AppBannerTableMode',
  props: ['list'],
  emits: ['refresh'],
  methods: {
    async handleChangeFlag (row) {
      const { bannerid, flag } = row
      // 调用接口
      try {
        await updateBannerFlagApi({ bannerid, flag: !flag })
        // 通知父组件进行刷新, 重新获取数据
        this.$emit('refresh')
      } catch (error) {}
    },
    async handleDeleteBanner (row) {
      const { bannerid } = row
      try {
        await deleteBannerItemApi(bannerid)
        // 通知父组件进行刷新, 重新获取数据
        this.$emit('refresh')
      } catch (error) {}
    }
  }
}
</script>